<template>
  <div class="container">
    <div class="dow-box">
      <img @click="iosDown" class="btn" v-src="'/static/img/down/iosdonw.png'" alt="">
      <img @click="androidDown" class="btn btn2" v-src="'/static/img/down/androiddown.png'" alt="">
    </div>
    <div class="rulerbox">
      <div class="text-align-center">
        <img style="width: 2rem" v-src="'/static/img/down/interverruler.png'" alt="">
      </div>
      <div class="list-item-box">
        <div class="list-item flex-row flex-y-center">
          <div class="flex-grow-0 yuan flex-x-center flex-y-center">1</div>
          <div class="flex-grow-1">分享您的手机号来邀请好友一起观影看剧。</div>
        </div>
        <div class="list-item flex-row flex-y-center">
          <div class="flex-grow-0 yuan flex-x-center flex-y-center">2</div>
          <div class="flex-grow-1">好友通过你分享页面注册且输入你的手机号即可获得3个月会员，获得更多观影资源。</div>
        </div>
        <div class="list-item flex-row flex-y-center">
          <div class="flex-grow-0 yuan flex-x-center flex-y-center">3</div>
          <div class="flex-grow-1">分享好友人数越多，获得会员时间越长，有机会获得永久会员哦。</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import {GETDOWNAPPLINK} from 'src/const/uri'
  import MDUtils from 'src/assets/js/md-utils'
  document.title = '飘花下载';
  export default {
    name: "downApp",
    data() {
      return {
        iosLink: '',
        androidLink: ''
      }
    },
    async created() {
      await this.getLink();
    },
    methods: {
      getLink() {
        this.$ajax.get(GETDOWNAPPLINK).then(res => {
          console.log(res.data);
          this.iosLink = res.data.h5_ios_down;
          this.androidLink = res.data.h5_android_down;
        })
      },
      iosDown() {
        if(MDUtils.is_ios()){
          window.location.href = this.iosLink;
        }
      },
      androidDown() {
        if(MDUtils.is_Android()){
          if(MDUtils.isWx()){
            this.$vux.toast.text('请在浏览器中打下载');
          }else {
            window.location.href = this.androidLink;
          }
        }
      }
    }
  }
</script>

<style scoped lang="less">
  .container {
    width: 100%;
    height: 13.34rem;
    background: url("../../../static/img/down/bg2.png") no-repeat top center;
    background-size: 100% 100%;
    overflow: hidden;
  }

  .dow-box {
    margin-top: 7.11rem;
    text-align: center;

    .btn {
      width: 3.11rem;
    }
  }

  .rulerbox {
    width: 100%;
    height: 4.34rem;
    background: url("../../../static/img/down/interver.png") no-repeat top center;
    background-size: 100% 100%;
    margin-top: 0.47rem;
    overflow: hidden;

    .text-align-center {
      margin-top: 0.43rem;
      margin-bottom: 0.08rem;
    }

    .list-item-box {
      font-size: 0.28rem;
      color: #f1f1ed;
      padding-left: .26rem;
      padding-right: .72rem;

      .list-item {
        margin-bottom: .16rem;
      }

      .yuan {
        color: #42200b;
        width: 0.51rem;
        height: 0.52rem;
        background: url("../../../static/img/down/yun-bg.png") no-repeat top center;
        background-size: 100% 100%;
        margin-right: 0.26rem;
      }
    }
  }

</style>